<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <div class="welcome-content">
        <h1>欢迎使用 WeChat Pad</h1>
        <p>这是一个强大的微信管理平台，帮助您更好地管理和使用微信功能。</p>
      </div>
    </el-card>
        <!-- 统计数据区域 -->
    <div class="stats-container">
      <el-card class="stat-card" :hoverable="true">
        <div class="stat-content">
          <div class="stat-label">昨日回复客户数</div>
          <div class="stat-value">{{ yesterdayCount }}</div>
          <div class="stat-trend" :class="yesterdayTrend > 0 ? 'up' : 'down'">{{ yesterdayTrend > 0 ? '↑' : '↓' }} {{ Math.abs(yesterdayTrend) }}%</div>
        </div>
      </el-card>

      <el-card class="stat-card" :hoverable="true">
        <div class="stat-content">
          <div class="stat-label">今日回复客户数</div>
          <div class="stat-value">{{ todayCount }}</div>
          <div class="stat-trend" :class="todayTrend > 0 ? 'up' : 'down'">{{ todayTrend > 0 ? '↑' : '↓' }} {{ Math.abs(todayTrend) }}%</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
// 模拟数据
const yesterdayCount = ref(128)
const todayCount = ref(95)
const yesterdayTrend = ref(15) // 百分比变化
const todayTrend = ref(-5) // 百分比变化
const loading = ref<boolean>(true)
// 无需额外的脚本逻辑
// 获取统计数据
const fetchStatsData = async () => {
  try {
    loading.value = true
    // 替换为你的后端API URL
    const response = await axios.get('/chat_counts')
    
    // 假设API返回格式：{ yesterdayCount, todayCount, yesterdayTrend, todayTrend }
    if (response.data.code === 200) {
      const data = response.data.data
      yesterdayCount.value = data.yesterday || 0
      todayCount.value = data.today || 0
      yesterdayTrend.value = data.yesterdayTrend || 0
      todayTrend.value = data.todayTrend || 0
    } else {
      ElMessage.error('获取统计数据失败: ' + (response.data.msg || '未知错误'))
    }
  } catch (error: any) {
    ElMessage.error('网络错误: ' + (error.message || '无法连接到服务器'))
  } finally {
    loading.value = false
  }
}
// 页面加载时获取数据
onMounted(() => {
  fetchStatsData()
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;

  .welcome-card {
    .welcome-content {
      text-align: center;
      padding: 40px 20px;

      h1 {
        font-size: 28px;
        color: #303133;
        margin-bottom: 20px;
      }

      p {
        font-size: 16px;
        color: #606266;
        line-height: 1.6;
      }
    }
  }

  
  .stats-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;

    .stat-card {
      flex: 1;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .stat-content {
        padding: 20px;

        .stat-label {
          font-size: 16px;
          color: #606266;
          margin-bottom: 10px;
        }

        .stat-value {
          font-size: 32px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }

        .stat-trend {
          font-size: 14px;

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style> 